<template>
  <div class="menu-wrapper">
<!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
<!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改企业信息</span>
      </div>
      <el-form-item label="企业名称:" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="企业编号:" prop="id">
      <el-col :span="6">
        <el-input v-model="form.id" disabled/>
      </el-col>
    </el-form-item>
      <el-form-item label="归属社区:" prop="communityId">
        <el-col :span="6">
          <queryCommunity @queryCommunityClick='queryCommunityClick' :shopname="form.communityName"></queryCommunity>
        </el-col>
      </el-form-item>
      <el-form-item label="所属楼宇:" prop="buildingId">
        <el-col :span="6">
          <queryApartment @queryApartmentClick='queryApartmentClick' :shopname="form.buildingName" :communityId="form.communityId"></queryApartment>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址:" prop="address">
        <el-col :span="6">
          <el-input v-model="form.address" clearable />
        </el-col>
      </el-form-item>
      <el-form-item
        label="是否绑定管理员:"
        prop="mobile"
      >
        <el-col :span="6">
          <el-input v-if="form.mobile" v-model="form.mobile" clearable />
          <el-tag :type="form.mobile == ''?'info':'success'" v-else>
            <span >{{form.mobile | watchBound}}</span>
          </el-tag>
        </el-col>
      </el-form-item>
      <el-form-item label="企业总人数:" prop="people">
        <el-col :span="6">
          <el-input v-model="form.people" clearable />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="updateCompany('form')">完 成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
// import Distpicker from "@/components/Distpicker/Distpicker";
import officeDialog from '@/components/OfficeDialog'
import { update, find } from "@/api/order";
import md5 from "js-md5";
import queryGoup from "@/components/Query/queryGroup";
export default {
  name: "group-edit",
  filters: {
    watchBound(val) {
      if (val == 1) {
        return '已绑定'
      } else {
        return '未绑定'
      }
    },
  },
  components: {
    queryGoup,
    officeDialog,
  },
  data() {
    return {
      userList:[],
      communityList:[],
      companyList:[],
      buildingList:[],
      pageNum: 1,
      pageSize: 20,
      userName:'',
      buildingName:this.$route.query.buildingName,
      buildingId:this.$route.query.buildingId,
      communityId:this.$route.query.communityId,
      communityName:this.$route.query.communityName,
      clicked: false, // 按钮防双击
      form: {
        id: '',
        name: "",
        people: '',
        orders:'',
        status:'',
        // userName: "",
        userId:'',
        mobile:'',
        communityId: '',
        communityName:"",
        buildingName:"",
        buildingId:'',
        address:"",
      },
      rules: {
        name: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        id: [
          { required: true, message: "请输入企业编号", trigger: "blur" }
        ],
        people: [
          { required: true, message: "请输入企业总人数", trigger: "blur" }
        ],
        userid: [
          { required: true, message: "请输入企业管理人员", trigger: "blur" }
        ],
        communityId:[
          { required: true, message: "请输入所属社区", trigger: "blur"}
        ],
        buildingIdId:[
          { required: true, message: "请输入所属楼宇", trigger: "blur"}
        ],
        address:[
          { required: true, message: "请输入详细地址", trigger: "blur"}
        ],
      }
    };
  },
  created(){
      var _this = this;
      _this.getData();
  },
  watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
    $route (newVal, oldVal) {
      if (newVal.name=='company-edit' && newVal.query.id!=this.id) {
        this.getData()
      }
    },
     communityName(newVal, oldVal){
       this.form.buildingName="";
     }
  },
  methods: {
    remoteMethod(query){
      this.loadCommuityData(query)
    },
    loadCommuityData(query) {
      var _this = this;
      _this.communityList=[];
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      // params.append('id',query)
      list(params).then(response => {
        response.data.data.forEach(item=>{
           let From ={
              id:item.id,
             name:item.name
           }
          if(item.id==this.form.communityId||this.communityName==''){
            this.communityName=item.name;
            // console.info('comm1',_this.form.communityId)
          }
          _this.communityList.push(From)
        })
      })
        .catch(error => {console.log('error!!')
      });
    },
    loadBuilding(query) {
      var _this = this;
      _this.buildingList=[];
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      buildList(params).then(response => {
        if(
          !utils.isNull(this.form.communityName)
          && !utils.isNull(this.form.communityId)
        ){
          let form={};
          response.data.data.forEach(item=>{
            if(item.communityName==_this.form.communityName ||
              item.communityId==_this.form.communityId){
                form=item;
              _this.buildingList.push(form);
            }
          })
        }
        else{
          _this.buildingList=response.data.data
        }
      }).catch(error => {console.log('error!!')
        });
    },
    queryCommunityClick(val) {
      this.form.communityId = val.shopId;
      this.form.communityName = val.name;
      this.communityName=this.form.communityName
    },
    queryApartmentClick(data){
      this.form.buildingId=data.shopId
      this.form.buildingName=data.name
      this.buildingName=this.form.buildingName
    },
      getData(){
          this.form.id = this.$route.query.id;
          var _this = this;
          find(_this.form.id)
      .then(response => {
        console.log("请求返回的数据" + JSON.stringify(response));
        if (response.type == "success") {
          _this.form.id = response.data.company.id;
          _this.form.name = response.data.company.name;
          _this.form.people = response.data.company.people;
          _this.form.status = response.data.company.status;
          _this.form.communityId=response.data.company.communityId;
          _this.form.communityName=response.data.company.communityName;
          // _this.form.userId=response.data.company.userId;
          _this.form.mobile=response.data.company.mobile;
          _this.form.buildingId=response.data.company.buildingId;
          _this.form.buildingName=response.data.company.buildingName;
          _this.form.address=response.data.company.address;
        } else {
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }
      })
      .catch(error => {});
      },

    updateCompany(form) {
      const _this = this;
      console.log("点击创建了",this.$refs[form],)
      this.$refs[form].validate(valid => {
        console.log("点击创建了",valid)
        if (valid) {
          // 校验表单
          _this.clicked = true;
          update(_this.form)
            .then(response => {
              _this.clicked = false;
              if (response.type == "success") {
                let data = _this.formatList(response.data);
                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("company-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({ visitedViews }) => {
                    _this.$router.push({
                      path: "/company/list",
                      query: { id: _this.form.id, companyName: _this.form.name}
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },
  }
};
</script>
